<template>
  <div class="naviPane">
    <div class="logo">
      <a href="/">
        <img src="../../../../static/images/logo.png">
      </a>
    </div>
    <div class="naviInfo">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="/">足球比分</a></li>
        <li><a href="#">足球比赛</a></li>
        <li class="mainMenu">账户设置
          <ul class="subMenu">
            <li>安全设置+
              <ul class="thirdMenu">
                <li><a href="#">修改密码</a></li>
                <li><a href="#">手机绑定</a></li>
                <li><a href="#">其他</a></li>
              </ul>
            </li>
          </ul>
          <ul class="subMenu">
            <li>个人资料+
              <ul class="thirdMenu">
                <li><a href="#">修改昵称</a></li>
                <li><a href="#">修改头像</a></li>
                <li></li>
              </ul>
            </li>
          </ul>
          <ul class="subMenu">
            <li>账号绑定+
              <ul class="thirdMenu">
                <li><a href="#">微信绑定</a></li>
                <li><a href="#">支付宝绑定</a></li>
                <li></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">联赛资料</a></li>
        <li><a href="#">专家推荐</a></li>
        <li><a href="#">竞彩资讯</a></li>
        <li><a href="#">帮助中心</a></li>
      </ul>
    </div>
    <div class="loginButton">
    <el-button round> 登录</el-button>
    <el-button round> 注册</el-button>

    </div>
    <div class="userImg">
      <img src="/static/images/expertsImg/1.jpg"/>

      <div class="userInfo">
        <span>昵称:{{ user1 }}</span>
        <span>积分:2002</span>
        <span>余额:￥145</span>
        <el-button type="danger"
                   style="height: 24px;width: 55px;padding:0;font-size: 12px;bottom: 0;position:absolute;bottom: 10px;right: 10px">
          退出登录
        </el-button>
      </div>
    </div>


  </div>

</template>

<script>

  export default {
    name: "navi",
    components: {},
    data() {
      return {
        user1: "数据大咖",

      }
    },
    methods: {},
    created() {
    }
  }
</script>

<style scoped lang="stylus">


  .naviPane
    position relative
    z-index 2

    :after
      clear: both;
      content: "";
      display: block
    //background-color #35abf8
    //background-color #35abf8
    height 60px
    width 1000px
    margin 0 auto

    .loginButton
      float left
      width 180px
      height 60px
      line-height 60px

    .userImg
      display none
      margin-left 20px
      float: left;
      width 60px
      height 60px
      &:hover
        .userInfo
          display block


      img
        padding 5px
        width 50px
        height 50px
        border-radius: 30px;

      .userInfo
        color white
        position: absolute;
        right 0px
        top 59px
        z-index 3
        //background-color #35abf8
        width 200px
        height 100px
        list-style: none
        font-size 14px
        display none

        :nth-child(1) {
          margin 0px 0 0 3px
          float: left;
        }

        :nth-child(2) {
          margin 0px 0 0 10px

        }

        :nth-child(3) {
          margin 10px 0 0 10px
          float: left;
        }

    .naviInfo
      height 60px
      line-height 60px
      width 650px
      float left

      ul
        font-size 14px
        margin 0
        padding 0

        :after {
          clear: both;
          content: "";
          display: block
        }
        line-height 60px
        list-style none

        .mainMenu
          &:hover
            .subMenu
              display block
          position: relative;

        li
          &:hover
            background-color  #d93635
            color white
            border-radius 4px
            a
              color white
          color black
          width 80px
          height 60px
          float left

          text-align center

          a
            color black
            text-decoration none


          ul
            display none

            &:hover
              .thirdMenu

                display block

            li
              background-color #ffffff
              color #878787
              line-height 60px
              text-align center

              ul
              .thirdMenu
                position absolute
                top 60px
                left 80px
                background-color #ffffff
                width 80px
                height 120px
                display none

                li
                  a
                    color #878787
                    text-decoration none


    .logo

      width 170px
      height 60px
      float left

      a
        text-decoration: none
        color black

      img
        width 60px
        height 60px

</style>
